<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;text-align: center">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="keyword" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="100">
      </el-table-column>
      <el-table-column prop="name" label="店铺名" width="180" sortable>
      </el-table-column>
      <el-table-column prop="manager.username" label="店长" width="160" sortable>
      </el-table-column>
      <el-table-column prop="manager.phone" label="电话号码" width="160" sortable>
      </el-table-column>
      <el-table-column prop="registerTime" label="注册时间" width="180" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="160" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0" style="color: green;">待审核</span>
          <span v-if="scope.row.state === 1" style="color: red;">审核通过</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template scope="scope">
          <el-button type="success" size="small" @click="handleAudit(scope.$index, scope.row)"
                     v-if="scope.row.state === 0">审核
          </el-button>
          <el-button type="danger"  size="small" @click="handleDel(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length == 0">Batch-Delete</el-button>
      <!--      @size-change 当每页显示条数的值发生改变时会触发-->
      <!--      @current-change 当 当前页的值发生改变时会触发-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          :current-page="query.currentPage"
          style="float: right">
      </el-pagination>
    </el-col>

    <!--手动审核界面-->
    <el-dialog title="手动审核" :visible.sync="saveAuditVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="addForm">
        <el-form-item label="门店名称" prop="name">
          <el-input v-model="saveForm.name" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input type="text" v-model="saveForm.registerTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="审核选择">
          <el-radio-group v-model="auditState">
            <el-radio :label="1">审核通过</el-radio>
<!--            <el-radio :label="0">审核驳回</el-radio>-->
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveAuditVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveCommit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>


  </section>
</template>

<script>


export default {
  data() {
    return {
      pageInfo: {
        rows: [],
        total: 0
      },
      query: {
        currentPage: 1,
        pageSize: 20,
        keyword: ""
      },

      listLoading: false,
      sels: [],//列表选中列

      saveFormVisible: false, //编辑界面是否显示
      addLoading: false,
      saveFormRules: {
        name: [
          {required: true, message: '请输入门店名称', trigger: 'blur'}
        ]
      },

      //编辑界面数据
      saveForm: {
        id: null,
        name: '',
        registerTime: '',
        state: '',
      },

      //手动激活data
      saveAuditVisible: false,  //手动激活界面显示

      // 待审核店铺 id
      shopAuditId: null,
      // 审核状态
      auditState: null

    }
  },
  methods: {

    selsChange: function (sels) {
      this.sels = sels;
    },

    search() {
      // 设置query.currengPage为1,当进行搜索时,从第一页开始重新进行搜索
      this.query.currentPage = 1;
      //调用查询
      this.getShops();
    },

    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.currentPage = 1;
      //查询结果
      this.getShops();
    },

    handleCurrentChange(val) {
      // val为当前页，赋值后重新进行查询
      this.query.currentPage = val;
      // 调用查询方法
      this.getShops();
    },

    // 手动审核弹框
    handleAudit: function (index, row) {
      this.saveAuditVisible = true;
      this.saveForm = Object.assign({}, row);
      this.shopAuditId = row.id;
      console.log(row.id);
    },

    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/shop/" + row.id)
            .then(result => {
              result = result.data;
              this.listLoading = false;
              if (result.success) {
                this.$message({message: '删除成功', type: 'success'});
                //删除成功后回到第一页
                this.query.currentPage = 1;
                // 删除成功,要重新刷新该页面，调用方法查询
                this.getShops();
              } else {
                this.$message({message: result.message, type: 'error'});
              }
            })
            .catch(result => {
              // this.$message({message: '很抱歉，网络有误', type: 'error'});
            })
      }).catch(() => {
        this.$message({message: '已取消删除', type: 'info'});
      });
    },

    //手动审核提交
    saveCommit() {
      this.$confirm('确认提交吗？', '提示', {}).then(() => {
        this.addLoading = true;
        // var para = this.ShopRejectDTO;
        this.$http.post("/shop/examine/" + this.shopAuditId)
            .then(result => {
              result = result.data;
              if (result.success) {
                //从第一页开始展示
                this.query.currentPage = 1;
                this.getShops();
                //关闭加载框
                this.addLoading = false;
                //关闭弹框
                this.saveAuditVisible = false;
                this.$message({message: '保存成功', type: 'success'});
              }
            }).catch(result => {
          this.$message({message: '网络错误', type: 'error'});
        })
      });
    },

    //获取待审核店铺列表
    getShops() {
      this.$http.post("/shop", this.query)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.pageInfo = result.resultObj;
              // console.log("33333333")
              // console.log(this.pageInfo)
            } else {
              this.$message({message: result.message, type: 'error'});
            }
          })
          .catch(result => {

          })
    },

    //批量删除数据
    batchRemove: function () {
      //遍历选中的sels数组的id值给ids
      var ids = this.sels.map(item => item.id);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        // 调用批量删除接口
        this.$http.patch("/shop", ids)
            .then(result => {
              result = result.data;
              this.listLoading = false;
              if (result.success) {
                this.$message({message: '批量删除成功!', type: 'success'});
                //删除后回到第一页
                this.query.currentPage = 1;
                //调用查询
                this.getShops();
              } else {
                this.$message({message: result.message, type: 'error'});
              }
            })
      }).catch(() => {
        this.$message({message: "网络错误", type: 'error'});
      });
    },


  },

  mounted() {
    // 钩子函数，页面加载后，调用此方法，加载部门
    this.getShops();
  }
}

</script>

<style scoped>

</style>
